<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('邮件系统2')" />
<th:block th:include="include :: list-css" />
<style type="text/css">
	.mid-content{border-radius: 10px;margin: 10px;right: 0;box-shadow: 5px 10px 30px -10px #000;}
	.left-content{position: absolute;white-space: normal;z-index: 998;width: 230px;height:100%;top:0;left:0;}
	.content iframe{border: none;width: 100%;height: calc(100vh - 20px);}
	.mail-ul li{font-weight:600;padding:0;line-height:30px;min-width: 140px;padding-left: 50px;text-align: left;cursor: pointer;}
	.layui-badge{border-radius: 10px;left:0}
	.layui-this{color: #fff;}
	.search{overflow: hidden;height: calc(100vh - 200px);}
	.search table td{height: 35px}
	.search table tr td:first-child{text-align: right;font-size: 11px}
	.search table tr .layui-input{width: 98%;padding: 0 3px;}
	.search table tr .layui-form-radio{margin: 0;padding-right: 0;}
	.icon_date_business{top: 11px !important;}
	.shead{width: 100%;height: 35px;line-height: 35px;text-align: center;color: #fff;font-weight: bolder;font-size: 14px;}
	table label{font-size: 12px;}
	table label input{vertical-align: bottom;zoom: 130%;}
</style>
</head>
<body>
<div class="main-content">
	<div class="mid-content" style="padding-left:230px">
		<div class="mail-tab" >
			<div class="left-content">
				<ul class="mail-ul">
					<li data-url="/system/oamail/mailList?pageType=inbox" data-type="list" class="layui-this"><i class="dhicon dh-envelope"></i>&nbsp;&nbsp;收件箱&nbsp;<p class="layui-badge badge1">0</p></li>
					<li data-url="/system/oamail/mailList?pageType=draftbox" data-type="list"><i class="dhicon dh-inbox"></i>&nbsp;&nbsp;草稿箱</li>
					<li data-url="/system/oamail/mailList?pageType=outbox" data-type="list"><i class="dhicon dh-paper-plane-o"></i>&nbsp;&nbsp;发件箱</li>
					<li data-url="/system/oamail/mailList?pageType=savebox" data-type="list"><i class="dhicon dh-floppy-o"></i>&nbsp;&nbsp;保留邮件</li>
					<li data-url="/system/oamail/mailList?pageType=massbox" data-type="list"><i class="dhicon dh-vcard-o"></i>&nbsp;&nbsp;群发邮件</li>
					<li data-url="/system/oamail/mailList?pageType=deletedbox" data-type="list"><i class="dhicon dh-recycle"></i>&nbsp;&nbsp;回收站</li>
				</ul>
				<div class="search">
					<form id="search-form" class="layui-form">
						<p class="shead  dhicon dh-filter">&nbsp;&nbsp;邮件搜索</p>
						<table style="margin-top: 10px;">
							<colgroup>
								<col width="65">
							</colgroup>
							<tr>
								<td>类型：</td>
								<td>
									<select name="mailKind" lay-search>
										<option value="MtAllMail">所有邮件</option>
										<option value="MtPrivateMail">收件箱</option>
										<option value="MtSendMail">发件箱</option>
										<option value="MtSaveMail">保留邮件</option>
										<option value="MtPublicMail">群发邮件</option>
										<option value="MtDeleteMail">回收站</option>
									</select>
								</td>
							</tr>
							<tr>
								<td>我是：</td>
								<td>
									<input type="radio" name="captionType" lay-filter="captionType" value="0" title="收件人" checked>
									<input type="radio" name="captionType" lay-filter="captionType" value="1" title="发件人">
								</td>
							</tr>
							<tr id="sendCaption">
								<td>发件人：</td>
								<td><input type="text" name="sendCaption" autocomplete="off" class="layui-input"></td>
							</tr>
							<tr id="reciveCaption" style="display: none;">
								<td>收件人：</td>
								<td><input type="text" name="reciveCaption" autocomplete="off" class="layui-input" th:value="${session.mandatorUser.userId}"></td>
							</tr>
							<tr>
								<td>主题：</td>
								<td><input type="text" name="mailTitle" autocomplete="off" class="layui-input"></td>
							</tr>
							<tr>
								<td>正文：</td>
								<td><input type="text" name="mailText" autocomplete="off" class="layui-input"></td>
							</tr>
							<tr>
								<td>发送时间：</td>
								<td style="position: relative;">
									<input type="text" name="sendTime" id="sendTime" class="layui-input" style="padding-right: 20px;">
									<i class="dhicon dh-calendar icon_date_business" style="z-index:1"></i>
								</td>
							</tr>
							<tr>
								<td>邮件状态：</td>
								<td>
									<select name="mailRead" id="mailRead" lay-search>
										<option value="">全部</option>
										<option value="1">已读</option>
										<option value="0">未读</option>
									</select>
								</td>
							</tr>
							<tr>
								<td colspan="2" style="text-align: center;height: 50px;">
									<div class="layui-btn" onclick="search()">
										<p class="dhicon dh-search" style="color:white;font-size:14px"><span class="fa_span">搜索</span></p>
									</div>
									<div class="layui-btn layui-btn-primary" onclick="cleanParam()">
										<p class="dhicon dh-refresh" style="color:white;font-size:14px"><span class="fa_span">重置</span></p>
									</div>
								</td>
							</tr>
						</table>
					</form>
				</div>
			</div>
			<div class="content" style="width: 100%;">
				<iframe id="mailbox" src="/system/oamail/mailList?pageType=inbox"></iframe>
			</div>
		</div>
	</div>
</div>
<script th:src="@{/js/jquery/jquery.min.js}"></script>
<script th:src="@{/js/jquery/jquery.cookie.js}"></script>
<script th:src="@{/js/layuiadmin-1.2.1/layui/layui.js?v=2}"></script>
<script th:src="@{/js/jquery/jquery.blockUI.min.js}"></script>
<script th:src="@{/dhecp/js/dh-common.js?v=53}"></script>
<script th:src="@{/dhecp/js/dh-ui.js?v=37}"></script>
<script type="text/javascript">
	var $,layer,form,element,laydate;
	layui.use(['layer','element','laydate','form', 'util'], function () {
		$ = layui.jquery,
		layer = layui.layer,
		form = layui.form,
		laydate = layui.laydate,
		element = layui.element,
		util = layui.util;
	// 	$(".left-content").css('border-right','1px dashed '+logo_color);
	// 	var logo_color_rgba = $(".layui-layout-admin .layui-logo", parent.document.body).css("backgroundColor").replace('rgb','rgba').replace(')',',0.5)');
	// 	$(".shead").css('background',logo_color_rgba);
	// 	$(".layui-this").css("background",logo_color_rgba);
		$(".shead").css('backgroundImage', "linear-gradient(to right,#359FD4,#36B5C8,#25D8AB)");
		$(".layui-this").css("backgroundImage", "linear-gradient(to left,#359FD4,#36B5C8,#25D8AB)");
		
		//邮箱类型切换
		$(".mail-ul").on("click","li",function(){
			$(".mail-ul li").removeClass("layui-this");
			$(".mail-ul li").css("background","#FFF");
			$(this).addClass("layui-this");
	// 		$(this).css("background",logo_color_rgba);
			$(this).css("backgroundImage", "linear-gradient(to left,#359FD4,#36B5C8,#25D8AB)");
			$('#mailbox').attr('src', $(this).attr("data-url"));
			refreshMail();
			cleanParam();
		})
		refreshMail();
		form.render();
		laydate.render({
			elem: '#sendTime'
			,type: 'date'
			,range: '~'
		});
		form.on('radio(captionType)', function(data){//邮件筛选（我的类型）
			if(data.value == 0){//我是收件人
				$('#sendCaption').show();
				$('#reciveCaption').hide();
				$('input[name="sendCaption"]').val('');
				$('input[name="reciveCaption"]').val(top.session.mandatorUser.userName);
			} else {//我是发件人
				$('#sendCaption').hide();
				$('#reciveCaption').show();
				$('input[name="sendCaption"]').val(top.session.mandatorUser.userName);
				$('input[name="reciveCaption"]').val('');
			}
		});
	});
	//刷新邮件数量
	function refreshMail(){
		$.get('/system/oamail/listwds',function(res){//未读收件任务数
			$('.badge1').text(res.data);
			if(res.data > 0){
				$('.badge1').show();
				parent.$('#unreadMail').show();
				parent.$('#unreadMail').text(res.data);
			}else {
				$('.badge1').hide();
				parent.$('#unreadMail').hide();
			}
		});
	}
	//邮件搜索
	function search(){
		var whereObj = $("#search-form").serializeObject(),
			url = "/system/oamail/searchByProcedure?MailKind=" + (whereObj['mailKind'] ? whereObj['mailKind'] : 'MtAllMail'),
			WhereText = '';
		if(whereObj['sendCaption']) WhereText += " And sendCaption Like '%" + whereObj['sendCaption'] + "%'";
		if(whereObj['reciveCaption']) {
			if(whereObj['captionType'] == 0) {
				WhereText += " And ((ReciveKind='person' And ReciveID='" + top.session.mandatorUser.userId
						+ "') Or (ReciveKind='dept' And ReciveDepartmentID Like '%" + top.session.mandatorUser.deptId
						+ "%') Or (ReciveKind='org') Or (ReciveKind='position' And ReciveID='" + '' + "'))";
			} else WhereText += " And reciveCaption Like '%" + whereObj['reciveCaption'] + "%'";
		}
		if(whereObj['mailTitle']) WhereText += " And mailTitle Like '%" + whereObj['mailTitle'] + "%'";
		if(whereObj['mailText']) WhereText += " And mailText Like '%" + whereObj['mailText'] + "%'";
		if(whereObj['sendTime']) {
			var st = whereObj['sendTime'].split('~');
			whereObj['sendTime_s'] = WhereText += " And sendTime > '" + st[0].substring(0,st[0].length-1) + " 00:00:00'";
			whereObj['sendTime_e'] = WhereText += " And sendTime < '" + st[0].substring(0,st[0].length-1) + " 23:59:59'";
		}
		if(whereObj['mailRead']) WhereText += " And mailRead = " + whereObj['mailRead'] + "";
		$("#mailbox")[0].contentWindow.closeView();
		$("#mailbox")[0].contentWindow.reloadTable(url + '&WhereText=' + encodeURIComponent(WhereText));
		table.reload('dhtable');
	}
	$.fn.serializeObject = function(){
		var o = {};
		var a = this.serializeArray();
		$.each(a, function() {
		    if (o[this.name]) {
		        if (!o[this.name].push) {
		            o[this.name] = [o[this.name]];
		        }
		        o[this.name].push(this.value || '');
		    } else {
		        o[this.name] = this.value || '';
		    }
		});
		return o;
	};
	//清空条件
	function cleanParam(){
		$("#search-form :input").not(":button, :submit, :reset, :hidden, :checkbox, :radio").val("");
		// $("#search-form :input").removeAttr("checked").remove("selected");
		$("#search-form select").val("");
		$("#search-form select[name='mailKind']").val("MtAllMail");
		form.render();
		var mailboxWin = $("#mailbox")[0].contentWindow;
		if(typeof mailboxWin.closeView == 'function')mailboxWin.closeView();
		if(typeof mailboxWin.reloadTable == 'function')mailboxWin.reloadTable('/system/oamail/listByProcedure?pageType=' + mailboxWin.pageType);
	}
</script>
</body>
</html>